<!DOCTYPE html>
<html>

    <head>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
        <meta charset="utf-8">
        <title>Jquery学习</title>
        <style>
            .red{
                color: red;
            }
        </style>

    </head>

    <body>
        <div class="outDiv">
            <P>
                <div id = "div01" class="Mydiv"><span>第一个 Div</span> </div>
            </P>

            <p>
                <div id = "div02" name="div02" class="Mydiv" >第二个 Div </div>
            </p>

            <p>
                <input type="hidden" name="userID" value="1" >
            </p>

            <p>
                <input type="checkbox" name="mylove" value="love1" />爱好1
                <input type="checkbox" name="mylove" value="love2" />爱好2
                <p>
                <input type="text" name="myInput" value="Tangjinhu">
                </p>
            </p>
            
            <p>
            <form id="myForem" action="javascript:void(0);" method="post">
                <input type="hidden" id="userId" name="userName" value="=1">

                <p>
                    <label for="userName">用户名：</label>
                    <input type="text" id="userName" name="userName" value="Tangjinhu" />
                </p>
    
                <p>
                    <label for="password">密码：</label>
                    <input type="password" id="password" name="password" value="111111">
                </p>

                <p>
                    <input type="hidden" name="cityId" name="userId" value="1890" />
                </p>

                <P>
                    <input type="text" name="cityName" value="shanghai" readonly>
                </P>

                <p>
                    <input type="text" name="localCityName" value="上海">
                </p>

                <button onclick="fun01()">btn01</button> 
                <button id="btn02">btn02</button>
                <button id="btn03">btn03</button>
                <button id="btn04">btn04</button>
            </form>
            </p>

        </div>
            <script>
                //页面加载时执行的函数
                $(function(){
                    jqueryTest_1();

                    //事件绑定
                    $("#btn02").on("click" ,function(){
                        fun02();
                    })

                    $("#btn03").click(function(){
                        insertUser();
                    });

                    $("#btn04").click(function(){
                        updateCity();
                    })
                });

                function fun01(){
                    alert("fhusigfsijg")
                }

                function fun02(){
                    location.href = "http://www.baidu.com";
                    location.href
                }

                function updateCity(){
                    $.ajax({
                        url:"http://www.sfac.xyz/api/city",
                        type:"put",
                        contentType:"application/x-www-form-urlencoded",
                        data: $("#myForm").serializeArray(),
                        seccess: function(result){
                            if(result.status == 200){
                                alert(result.message);
                                console.log(result.data);
                            }else{
                                alert(result.message);
                            }
                        },
                        error: function(erro){
                            console.log(erro);
                        }
                    });
                }

                function insertUser() {
				var user = {};
				user.userName = $("#userName").val();
				user.password = $("#password").val();

				// 调用 ajax 函数，参数为 ajax 的配置属性对象
				$.ajax({
					url:"http://www.sfac.xyz/api/user",
					type:"post",
					contentType:"application/json",
					data: JSON.stringify(user),
					success: function(result) {
						if (result.status == 200) {
							alert(result.message);
							console.log(result.data);
						} else {
							alert(result.message);
						}
					},
					error: function(erro) {
						console.log(erro);
					}
				});
			}

                function jqueryTest_1(){
                    console.log($ == jQuery);

                    //选择器
                    console.log($("#dic01"));
                    console.log($("#div01").html());
                    console.log($("div"));
                    console.log($(".Mydiv"));
                    console.log($("[name=div02]"));
                    //div01显示隐藏域里的值
                    // $("#div01").html($("input[name=userID]").val())

                    //层级选择器
                    console.log($("div.outDiv p input").val());

                    //过滤器
                    console.log($("input:hidden").val());
                    console.log($("#div01").text());
                    console.log($("#div02").html());
                    $('#div01').html("清澈的爱只为中国，<span style='color:red'>五星红旗我为你骄傲！</span>");
                
                    // $("#div02").addClass("red");
                    // $("#div02").css("color", "red");
                    // $("#div01").hide();

                    console.log($(window).width());
                    console.log($(window).height());
                    console.log($(document).width());
                    console.log($(document).height());
                    $("#div01").css("width", "400px")
                               .css("height","50px")
                               .css("border", "solid 1px gray");
                    console.log($("#div01").width());
                    console.log($("#div01").height());

                    //添加，删除数据
                    $("#div01").attr("data","Tangjinhu");
                    $("#div01").removeAttr("data");
                    $('#div01').append("<span style='color:blue'>!!!!</span>");
                    
                    console.log($("[name=mylove]").attr("value"));
                    //添加状态
                    console.log($("input[type=checkbox][value=love1]").attr("checked","checked"));
                    console.log($("input[type=checkbox][value=love2]").prop("checked","checked"));
                    //查看状态
                    console.log($("input[type=checkbox][value=love1]").attr("checked"));
                    console.log($("input[type=checkbox][value=love1]").prop("checked"));

                    //动态加载
                    var arr = ["cadsdbah",455,"shfjsd", 54455];
                    $.each(arr, function(i,item){
                        console.log(i+"------"+item);
                    });

                    //
                    console.log($("myForm").serializeArray());
                    var user = {
                        userId: 1,
                        userName:"Tangjihu",
                        password:"111111"
                    };
                    console.log(JSON.stringify(user));
                    
                }
        </script>
        
    </body>

</html>